<template>
  <div class="app-container">
    <div class="Header">
      <edit-form ref="filterContainer" v-show="showSearch" :editFormMap="filterMap" :editFormData="queryParams">
        <template slot="buttonGroup">
          <el-col :span="4">
            <el-form-item class="buttonGroup">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </template>
      </edit-form>
      <handle-button-group
        :showSearch.sync="showSearch"
        :single="single"
        :multiple="multiple"
        :authModule="{ module: 'user', name: 'score' }"
        :btnAuth="{ add: false, edit: false, delete: false, export: true }"
        @handleAdd="handleAdd"
        @handleUpdate="handleUpdate"
        @handleDelete="handleDelete"
        @handleExport="handleExport"
        @getList="getList"
      />
    </div>
    <table-list
      ref="tableListContainer"
      :tableListMap="tableMap"
      :request="{
        apiKey: 'userScoreList',
        params: queryParams,
        method: 'get',
      }"
      @changeTableListAction="
        (TableList) => {
          userList = TableList;
        }
      "
    ></table-list>
  </div>
</template>

<script>
import { exportScore } from '@/api/user/score';
import { getDataSource } from '@/static/js/dataSource';
export default {
  name: 'Score',
  computed: {
    filterMap() {
      return getDataSource('editForm', 'userScoreFilter');
    },
    tableMap() {
      return getDataSource('tableColumn', 'userScoreList');
    },
  },
  watch: {
    open() {
      this.$nextTick(() => {
        const editFormContainer = this.$refs.editFormContainer;
        const editFormData = editFormContainer.$refs.editFormData;
        editFormData.resetFields();
      });
    },
  },
  data() {
    return {
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.$nextTick(() => {
        const propArr = this.filterMap.filter((item) => item.type === 'inputRange');
        propArr.map((item) => {
          item.children.map((childrenItem) => {
            const value = this.queryParams[childrenItem.prop];
            if (value !== 0 && value && childrenItem.type !== 'separator') {
              this.$set(this.queryParams, childrenItem.prop, parseFloat(value));
            }
          });
        });
        this.$refs.tableListContainer.init();
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      const tableListContainer = this.$refs.tableListContainer;
      tableListContainer.pagination = tableListContainer.$options.data().pagination;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      const filterContainer = this.$refs.filterContainer;
      filterContainer.resetForm('editFormData');
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {},
    /** 修改按钮操作 */
    handleUpdate(row) {},
    /** 删除按钮操作 */
    handleDelete(row) {},
    /** 导出按钮操作 */
    handleExport() {
      const tableListContainer = this.$refs.tableListContainer;
      const pagination = tableListContainer.pagination;
      const params = {
        ...pagination,
        ...this.queryParams,
      };
      exportScore(params, '会员积分变动数据导出');
    },
  },
};
</script>
<style lang="scss" scoped></style>
